<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script>
	var interval;
		function go(ing,end){
			document.all.div1.style.width = (ing+1)/end*100+"%";
			document.all.div2.innerHTML = parseInt((ing+1)/end*100,10)+"%";
		}
		function go1(ing, end){
			document.all.div11.style.width = (ing)/end*100+"%";
			document.all.div22.innerHTML = parseInt((ing)/end*100,10)+"%";
		}
		function go2(ing, end){
			document.all.div111.style.width = (ing)/end*100+"%";
			document.all.div222.innerHTML = parseInt((ing)/end*100,10)+"%";
		}
		
		$(document).ready(function(){
			interval = setInterval("ing()",40);
			interval = setInterval("ing2()",40);
			interval = setInterval("ing3()",40);
			
		});
		
		function ing(){
			$.ajax({
				"url" : "/MilkProduction/process.do",
				"type" : "post",
				"data" : {"method" : "impregnatorMonitor"},
				"dataType" : "json",
				"success" : function(map){
					
					go(map.milkAmount,map.totalAmount);
					if(map.milkAmount>map.totalAmount){
						clearInterval(interval);
					}
					
				},
				"error" : function(xhr,dd,error){
					alert("ㅠㅠ"+error);
				}
			});
		}
		
		function ing2(){
			$.ajax({
				"url" : "/MilkProduction/process.do",
				"type" : "post",
				"data" : {"method" : "paviorMonitor"},
				"dataType" : "json",
				"success" : function(map){
					go1(map.productMilkBox,map.totalbox);
					if(map.productMilkBox>map.totalbox){
						clearInterval(interval);
					}
					
				},
				"error" : function(xhr,dd,error){
					alert("ㅠㅠ"+error);
				}
			});
		}
		function ing3(){
			$.ajax({
				"url" : "/MilkProduction/process.do",
				"type" : "post",
				"data" : {"method" : "sterilizerMonitor"},
				"dataType" : "json",
				"success" : function(map){
					go2(map.nowWorkAmoune,map.totalAmount);
					if(map.nowWorkAmoune>map.totalAmount){
						clearInterval(interval);
					}
					
				},
				"error" : function(xhr,dd,error){
					alert("ㅠㅠ"+error);
				}
			});
		}
	</script>
</head>
<!-- 상태진행바가 위치할 HTMl소스 -->
<body>
	<br>
	<br>
	<table width="495" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC" style="font-size:11px;">
		<tr>
			<td align="center" bgcolor="#EEEEEE" width="100">살균진행율 </td>
			<td bgcolor="#ffffff">
				<table id ="div111" width="50%" height="10" border="0" cellpadding="0" cellspacing="0" bgcolor="#008000">
					<tr>
						<td width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#008000', endColorStr='#ADFF2F', gradientType='1')"></td>
						<td width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ADFF2F', endColorStr='#008000', gradientType='1')"></td>
					</tr>
				</table>
			</td>
			<td id ="div222" align="center" bgcolor="#ffffff" width="50">0</td>
		</tr>
		<tr>
			<td align="center" bgcolor="#EEEEEE" width="100">주입진행율 </td>
			<td bgcolor="#ffffff">
				<table id ="div1" width="50%" height="10" border="0" cellpadding="0" cellspacing="0" bgcolor="#428EA1">
					<tr>
						<td width="60%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#32788A', endColorStr='#5DB4CA', gradientType='1')"></td>
						<td width="40%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#5DB4CA', endColorStr='#32788A', gradientType='1')"></td>
					</tr>
				</table>
			</td>
			<td id ="div2" align="center" bgcolor="#ffffff" width="50">0</td>
		</tr>
		<tr>
			<td align="center" bgcolor="#EEEEEE" >포장진행율</td>
			<td bgcolor="#ffffff">
				<table id ="div11" width="50%" height="10" border="0" cellpadding="0" cellspacing="0" bgcolor="#CC3333">
					<tr>
						<td width="80%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#CC2A2C', endColorStr='#FA8A8B', gradientType='1')"></td>
						<td width="20%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FA8A8B', endColorStr='#CC2A2C', gradientType='1')"></td>
					</tr>
				</table>
			</td>
			<td id ="div22" align="center" bgcolor="#ffffff" class="org">0</td>
		</tr>
	</table>
	
	

</body>
</html>